import {
  Tabs,
  Input,
  CalendarPicker,
  Button,
  Divider,
  Toast,
} from "antd-mobile";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { withPerformance } from "../../components/withPerformance";

const Home = () => {
  const [visible1, setVisible1] = useState(false);
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const navigate = useNavigate();
  const toAirPlane = () => {
    if (start === "" || end === "") {
      Toast.show("地点不可以为空");
      return;
    }

    navigate(`/trip/airplane?start=${start}&end=${end}`);
  };
  return (
    <div>
      <Tabs>
        <Tabs.Tab title="汽车票" key={1}>
          汽车票
        </Tabs.Tab>
        <Tabs.Tab title="火车票" key={2}>
          火车票
        </Tabs.Tab>
        <Tabs.Tab title="飞机票" key={3}>
          <div>
            <h2>飞机票</h2>
            <div
              style={{
                height: 46,
                display: "flex",
                alignItems: "center",
              }}
            >
              <Input
                placeholder="起点"
                style={{ width: 150, textAlign: "center" }}
                value={start}
                onChange={(e) => setStart(e)}
              ></Input>
              <Divider>到</Divider>
              <Input
                placeholder="终点"
                style={{ width: 150, textAlign: "center" }}
                value={end}
                onChange={(e) => setEnd(e)}
              ></Input>
            </div>
            <CalendarPicker
              visible={visible1}
              selectionMode="single"
              onClose={() => setVisible1(false)}
              onMaskClick={() => setVisible1(false)}
            />
            <Button block color="primary" onClick={() => toAirPlane()}>
              查询
            </Button>
          </div>
        </Tabs.Tab>
      </Tabs>
    </div>
  );
};


export default withPerformance(Home);
